<template>
  <div class="container">
    <el-card>
      <el-form :inline="true">
        <el-row>
          <el-col :span="16">
            <el-form-item label="标签名称">
              <el-input v-model="requestParams.tagName"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="requestParams.state" placeholder="请选择">
                <el-option :value="1" label="已启用"></el-option>
                <el-option :value="0" label="已禁用"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="clear()">清除</el-button>
              <el-button type="primary" @click="search()">搜索</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="text-align: right">
            <el-form-item>
              <el-button type="success" icon="el-icon-edit" @click="addTage()"
                >新增目录</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-alert :title="`数据一共 ${total} 条`" type="info" show-icon>
        </el-alert>
      </el-form>
      <el-table :data="table" style="width: 100%">
        <el-table-column type="index" :index="index" label="序号" width="100">
        </el-table-column>
        <el-table-column label="所属学科" width="280" prop="subjectName">
        </el-table-column>
        <el-table-column label="标签名称" width="280" prop="tagName">
        </el-table-column>
        <el-table-column prop="username" label="创建者" width="280">
        </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="280">
        </el-table-column>
        <el-table-column label="状态" width="280">
          <template #default="scope">{{
            scope.row.state === 1 ? "已启用" : "已禁用"
          }}</template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button @click="toggleState(scope.row)" type="text">{{
              scope.row.state === 1 ? "禁用" : "启用"
            }}</el-button>
            <el-button
              type="text"
              @click="edit(scope.row)"
              :disabled="scope.row.state === 1"
              >修改</el-button
            >
            <el-button type="text" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="requestParams.page"
        :page-sizes="[2, 4, 6, 8, 10, 12]"
        :page-size="requestParams.pagesize"
        layout=" sizes, prev, pager, next, jumper"
        :total="total"
        style="text-align: right"
      >
      </el-pagination>
    </el-card>
    <TagsAdd ref="tagsAdd" :data="addForm" />
  </div>
</template>

<script>
import { list, remove, changeState } from '../../api/hmmm/tags'
import TagsAdd from '../components/tags-add.vue'
export default {
  components: {
    TagsAdd
  },
  data () {
    return {
      requestParams: {
        tagName: null,
        state: null,
        page: 1,
        pagesize: 10
      },
      total: 155,
      table: [],
      addForm: {}
    }
  },
  created () {
    this.getList()
    // console.log(this.data)
  },
  methods: {
    del (val) {
      // console.log(val)
      this.$confirm('此操作将永久删除该文章,是否继续', '提示', { type: 'warning' })
        .then(async () => {
          await remove(val)
          this.requestParams.page = 1
          this.getList()
          this.$message.success('删除成功')
        })
        .catch(() => {
          this.$message.info('取消删除')
        })
    },
    index (index) {
      return (
        index + 1 + this.requestParams.pagesize * (this.requestParams.page - 1)
      )
    },
    edit (value) {
      //   console.log(value)
      this.addForm = value
      this.$nextTick(() => {
        this.$refs.tagsAdd.openWindow()
      })
    },
    addTage (value = {}) {
      this.addForm = value
      this.$nextTick(() => {
        this.$refs.tagsAdd.openWindow()
      })
      console.log(value)
    },
    search () {
      this.requestParams.page = 1
      this.getList()
    },
    clear () {
      this.requestParams = {
        tagName: null,
        state: null,
        page: 1,
        pagesize: 10
      }
      this.getList()
    },
    async getList () {
      this.requestParams.subjectID = this.$route.query.id || null
      const {
        data: { counts, items }
      } = await list(this.requestParams)
      this.total = counts
      this.table = items
      // console.log(this.table)
      //   console.log(items)
    },
    handleSizeChange (val) {
      this.requestParams.pagesize = val
      this.requestParams.page = 1
      this.getList()
    },
    handleCurrentChange (val) {
      this.requestParams.page = val
      this.getList()
    },
    // 切换状态
    async toggleState (row) {
      await changeState({
        id: row.id,
        state: row.state === 1 ? 0 : 1
      })
      this.$message.success('操作成功')
      row.state = row.state === 1 ? 0 : 1
    }
  }
}
</script>

<style scoped lang='less'></style>
